<template>
  <div>
    <div id="user1_main" />
    <div id="user2_main" />
    <!-- <div><span>userID：</span><input type="text" v-model="userID" /></div>
    <div style="margin-top: 6px;"><span>callUserID：</span><input type="text" v-model="callUserID" /></div>
    <button @click="init()" style="margin: 10px 10px 10px 0; height: 28px;"> Step 1: Initialization </button>
    <button @click="call()" style="margin: 10px 10px 10px 0; height: 28px;"> Step 2: Start 1v1 video call </button>
    <div style="width: 50rem; height: 35rem; border: 1px solid salmon;">
      <TUICallKit /> -->
  </div>
</template>

<script>
import TRTC from 'trtc-sdk-v5'
import libGenerateTestUsersigMin from '@/debug/lib-generate-test-usersig.min'
const userId = 'user2'
const sdkAppId = 1600032508

function genTestUserSig(userID) {
  const SDKAPPID = 1600032508
  const EXPIRETIME = 604800
  const SECRETKEY = ''
  const generator = new libGenerateTestUsersigMin(SDKAPPID, SECRETKEY, EXPIRETIME)
  const userSig = generator.genTestUserSig(userID)
  return {
    sdkAppId: SDKAPPID,
    userSig: userSig
  }
}

function init() {
}

function call() {
}

export default {
  name: '',
  async created() {
    const trtc = TRTC.create()
    const { userSig } = genTestUserSig(userId)
    // const userSig = "eJwtzFELgjAUhuH-suuQc2auKXTRTSBIIkl2W2yzQznGlFKi-95QL7-ng-fL6uIcvbVnGeMRsM28SWk7kKGZka-aq*fNOVIsQwEAMU9ALs9AnQ66w2CxxHRRPTrywQVsJcDaoDYk6WjLU5lX0DUm-Uy2wbrwL3c-UOIq018e6jri5FMv8j37-QHhuTAa"
    try {
      console.log('开始进房')
      console.log('进房参数', { roomId: 8888, scene: 'rtc', sdkAppId, userId, userSig })
      await trtc.enterRoom({ roomId: 8888, scene: 'rtc', sdkAppId, userId, userSig })
      console.log('进房成功')
    } catch (error) {
      console.error('进房失败 ' + error)
    }
    const view = 'user2_main'
    trtc.startLocalVideo({ view })
    trtc.startLocalAudio()
    // const streamType = 'main'
    // const view = `${userId}_${streamType}`;
    // trtc.startRemoteVideo({ userId, streamType, view });
    trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
      // 为了播放视频画面，您需在 DOM 中放置一个 HTMLElement，可以是一个 div 标签，假设其 id 为 `${userId}_${streamType}`
      console.log('远端视频可用', { userId, streamType })
      const view = `${userId}_${streamType}`
      trtc.startRemoteVideo({ userId, streamType, view })
    })
  }
}

</script>

    <style scoped>
    #user1_main {
      width: 400px;  /* 设置宽度 */
      height: 400px; /* 设置高度 */
    }
    </style>
